<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题 - 异烟酸生产收率预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/main-nav.css">
    <link rel="stylesheet" href="styles/sidebar.css">
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏容器 -->
        <div id="sidebar-container" data-fallback="true">
            <!-- 侧边栏将通过JavaScript动态加载 -->
        </div>

        <!-- 移动端菜单遮罩层 -->
        <div class="sidebar-overlay"></div>
        
        <!-- 移动端菜单按钮 -->
        <button class="mobile-toggle d-none">
            <i class="fas fa-bars"></i>
        </button>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <header class="top-bar">
                <div class="page-title">
                    <h1>页面标题</h1>
                    <p>页面描述文本</p>
                </div>
                <div class="top-bar-actions">
                    <div class="search-bar">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索...">
                    </div>
                    <div class="notification">
                        <i class="far fa-bell"></i>
                        <span class="badge">0</span>
                    </div>
                    <div class="setting">
                        <i class="fas fa-cog"></i>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content-wrapper">
                <!-- 顶部导航链接 -->
                <div class="navigation-links">
                    <a href="model-value.html" class="nav-link">1. 模型应用价值与落地路径</a>
                    <a href="system-architecture.html" class="nav-link">2. 系统架构设计</a>
                    <a href="data-flow.html" class="nav-link">3. 数据流设计</a>
                    <a href="model-deployment.html" class="nav-link">4. 模型部署与应用</a>
                    <a href="ui-design.html" class="nav-link">5. 用户界面设计</a>
                </div>

                <!-- 页面内容 -->
                <div class="page-content">
                    <!-- 第一部分 -->
                    <div class="section-title">第一部分标题</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-info-circle"></i>
                            内容卡片标题
                        </div>
                        <p>这里是内容描述文本。</p>
                    </div>
                    
                    <!-- 第二部分 -->
                    <div class="section-title">第二部分标题</div>
                    
                    <div class="info-grid">
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <div class="info-card-title">信息卡片标题</div>
                            <div class="info-card-text">
                                信息卡片描述文本。
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-cogs"></i>
                            </div>
                            <div class="info-card-title">信息卡片标题</div>
                            <div class="info-card-text">
                                信息卡片描述文本。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="js/load-sidebar.js"></script>
    <script src="js/sidebar.js"></script>
    <script src="js/mobile-menu.js"></script>
</body>
</html> 